<template>
	<view>
		<scroll-view
			scroll-x
			class="scroll-view"
			:scroll-into-view="scrollInto"
			scroll-with-animation
		>
			<view
				v-for="(item, index) in navTowList"
				:key="index"
				:class="[
					'scroll-view-item',
					index === active ? 'current animate__animated animate__fadeInUp' : ''
				]"
				:id="'tab' + index"
				@click="switchTab(index)"
			>
				{{ item.name }}
			</view>
		</scroll-view>

		<!-- 内容区 -->
		<swiper
			:duration="150"
			:current="active"
			@change="activation"
			:style="'height:' + availableHeight + 'px'"
		>
			<swiper-item v-for="(item, index) in contentData" :key="index">
				<scroll-view
					scroll-y
					:style="'height:' + availableHeight + 'px'"
					@scrolltolower="load(index)"
				>
					<template v-if="item.articleList.length > 0">
						<block v-for="(item2, index2) in item.articleList" :key="index2">
							<!-- 内容 -->
							<my-homeArticle :articleList="item2" :index="index2"></my-homeArticle>
						</block>
						<!-- 上拉加载 -->
						<view class="load">
							<text>{{ item.loadType }}</text>
						</view>
					</template>

					<!-- 无数据页面 -->
					<template v-else>
						<my-null></my-null>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'my-navigationTwo',

	props: {
		// 屏幕可用高度
		availableHeight: {
			type: Number,
			default: 0
		},

		// 导航数据
		navTowList: {
			type: Array,
			default: () => []
		},

		// 内容数据
		contentData: {
			type: Array,
			default: () => []
		}
	},

	data() {
		return {
			// 当前激活项
			active: 0,
			scrollInto: ''
		}
	},

	methods: {
		// 导航切换
		switchTab(index) {
			if (this.active === index) return
			this.active = index
			this.scrollInto = 'tab' + index
		},

		// 内容&导航联动
		activation(e) {
			this.switchTab(e.detail.current)
		},

		// 上拉加载
		load(index) {
			let item = this.contentData[index]
			item.loadType = '加载中...'
			// 模拟数据请求
			setTimeout(() => {
				item.loadType = '上拉加载更多'
			}, 2000)
		}
	},

	created() {}
}
</script>

<style lang="less">
.scroll-view {
	width: 100%;
	margin-top: 20rpx;
	white-space: nowrap;
	background-color: #fff;
	.scroll-view-item {
		display: inline-block;
		width: 20%;
		height: 60rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		text-align: center;
		padding: 0 20rpx;
		color: #888888;
		&.current {
			font-size: 40rpx;
			font-weight: 600;
			color: #ff007f;
			border-bottom: 2rpx solid #ff007f;
		}
	}
}
.load {
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		padding-top: 10rpx;
		font-size: 28rpx;
		color: #ffa6c2;
	}
}
</style>
